<template>
  <div class="appLeftMenuCont">
    <div
      class="appLeftMenuItem"
      :class="{ menuActive: commonStore.activedMenu === 'home' }"
      @click="changeMenu('home')"
    >
      发现音乐
    </div>
    <div
      class="appLeftMenuItem"
      :class="{ menuActive: commonStore.activedMenu === 'focus' }"
      @click="changeMenu('focus')"
    >
      关注
    </div>
    <div
      class="appLeftMenuItem"
      :class="{ menuActive: commonStore.activedMenu === 'fm' }"
      @click="changeMenu('fm')"
    >
      私人FM
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import useCommonStore from "@/stores/common";

const commonStore = useCommonStore();

const changeMenu = (menu: string) => {
  commonStore.switchActivedMenu(menu);
};
</script>

<style scoped lang="less">
.appLeftMenuCont {
  height: 100%;
  overflow: hidden;
  width: 200px;
  padding: 10px;
  border-right: 1px solid rgb(224, 224, 224);
  .appLeftMenuItem {
    height: 36px;
    padding-left: 5px;
    line-height: 36px;
    color: rgb(53, 53, 53);
    cursor: pointer;
    &:hover {
      background-color: rgb(246, 246, 246);
    }
    &.menuActive {
      background-color: rgb(246, 246, 246);
      color: rgb(53, 53, 53);
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>
